<template>
  <div id="app">
    <!-- 头部 -->
    <div style="height: 60px; line-height: 60px; background-color: azure; margin-bottom: 2px">
      <span style="margin-left: 24px; font-size: 24px">用户中心-{{ store.nickname }}</span>
    </div>

    <!-- 侧边栏和主体 -->
    <div style="display: flex">
      <!-- 侧边栏 -->
      <div
        style="min-height: calc(100vh - 62px); width: 300px; height: 200px; overflow: hidden; margin-right: 2px; background-color: white">
        <el-row class="tac">
          <el-col :span="12">
            <el-menu router default-active="2" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose">

              <el-menu-item index="/EditUser">
                <el-icon><icon-menu /></el-icon>
                <span>个人信息</span>
              </el-menu-item>
              <el-menu-item index="/BuyToken">
                <el-icon><icon-menu /></el-icon>
                <span>购买套餐</span>
              </el-menu-item>
              <el-menu-item index="/PaymentRecords">
                <el-icon><icon-menu /></el-icon>
                <span>支付记录</span>
              </el-menu-item>

              <el-menu-item >
                <el-icon><icon-menu /></el-icon>
                <span @click="toAi_Chat">返回首页</span>
              </el-menu-item>

            </el-menu>
          </el-col>
        </el-row>
      </div>


      <!-- 主体 -->
      <div style="flex: 1; background-color: white; padding: 10px">
        <router-view />
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive } from "vue";
import { useRoute, useRouter } from "vue-router";


import { useTokenStore } from '@/stores/user'


const store = useTokenStore();
const router = useRouter();


const handleOpen = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}
const handleClose = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}


const toAi_Chat = ()=>{
  router.push("/ai_chat");
}


</script>  